<template>
  <div>
    <!-- 查询条件 -->
    <div class='table-page-search-wrapper'>
      <a-form-model layout='inline' >
        <a-row :gutter='24'>

          <a-col :md='6' :sm='8'>
            <a-form-model-item label='报表日期'>
              <a-date-picker v-model='ds' @change='onChange' />
            </a-form-model-item>
          </a-col>
          <a-col :md='6' :sm='8'>
            <span style='float: left;overflow: hidden;' class='table-page-search-submitButtons'>
              <a-button type='primary' icon='search' @click='loadData'>查询</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <!-- 生成条件 -->
    <div class='table-page-search-wrapper'>
      <a-form-model layout='inline'>
        <a-row :gutter='24'>
          <a-col :md='9' :sm='8'>
            <a-form-model-item label='工单时间'>
              <a-range-picker
                v-model='totalTime'
                style='width: 280px'
                :show-time="{
                hideDisabledOptions: true,
                defaultValue: [moment('15:00:00', 'HH:mm:ss'), moment('15:00:00', 'HH:mm:ss')],}"
                format='YYYY-MM-DD HH:mm:ss' />
            </a-form-model-item>
          </a-col>
          <a-col :md='9' :sm='8'>
            <a-form-model-item label='未办结时间'>
              <a-range-picker
                v-model='unfinishedTime'
                style='width: 280px'
                :show-time="{
                hideDisabledOptions: true,
                defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('15:00:00', 'HH:mm:ss')],}"
                format='YYYY-MM-DD HH:mm:ss' />
            </a-form-model-item>
          </a-col>
          <template v-if='toggleSearchStatus'>
            <a-col :md='12' :sm='8'>
              <a-form-model-item label='筛选条件'>
                <template v-for='(tag, index) in tags'>
                  <a-tooltip v-if='tag.length > 20' :key='tag' :title='tag'>
                    <a-tag color='blue' :key='tag' :closable='index >= 0' @close='() => handleClose(tag)'>
                      {{ `${tag.slice(0, 20)}...` }}
                    </a-tag>
                  </a-tooltip>
                  <a-tag color='blue' v-else :key='tag' :closable='index >= 0' @close='() => handleClose(tag)'>
                    {{ tag }}
                  </a-tag>
                </template>
                <a-input
                  v-if='inputVisible'
                  ref='input'
                  type='text'
                  size='small'
                  :style="{ width: '78px' }"
                  :value='inputValue'
                  @change='handleInputChange'
                  @blur='handleInputConfirm'
                  @keyup.enter='handleInputConfirm'
                />
                <a-tag v-else style='background: #fff; borderStyle: dashed;' @click='showInput'>
                  <a-icon type='plus' />
                  新条件
                </a-tag>
              </a-form-model-item>
            </a-col>
          </template>
          <a-col :md='6' :sm='8'>
            <span style='float: left;overflow: hidden;' class='table-page-search-submitButtons'>
              <a-button type='primary'  @click='generateData'>生成/重置</a-button>
              <a @click='handleToggleSearch' style='margin-left: 8px'>
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form-model>
    </div>


    <a-table
      rowKey='id'
      ref='table'
      size='middle'
      bordered
      :columns='columns'
      :dataSource='dataSource'
      :pagination='ipagination'
      :loading='loading'
      @change='handleTableChange'
    >
      <span slot='purpose' slot-scope='text, record,index'>
        <span v-if="text.purpose==='98'">咨询类</span>
        <span v-else-if="text.purpose==='01'">建议类</span>
        <span v-else>投诉类</span>
      </span>
      <span slot='dealType' slot-scope='text, record,index'>
        <span v-if="text.dealType==='2'">已答复</span>
        <span v-else>办理中</span>
      </span>
    </a-table>
  </div>
</template>

<script>
import moment from 'moment'
import ReportsEpidemicDailyService from '@/myService/ReportsEpidemicDailyService'

export default {
  name: 'Step1',
  data() {
    return {
      ds: '',
      queryParam: {
        ds: '',
        pageIndex: 1,
        pageSize: 30
      },
      /* 查询折叠 */
      toggleSearchStatus: false,
      /* 数据源 */
      dataSource: [],
      totalTime:[moment((new Date).getTime()-24*60*60*1000).format("YYYY-MM-DD 15:00:00"),moment(new Date()).format("YYYY-MM-DD 15:00:00")],
      unfinishedTime:[moment(new Date()).format("YYYY-MM-DD 00:00:00"),moment(new Date()).format("YYYY-MM-DD 15:00:00")],
      tags: ['冠状病毒', '疫情'],
      inputVisible: false,
      inputValue: '',
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: (text, row, index) =>
            <span>{this.ipagination.pageSize * (this.ipagination.current - 1) + index + 1}</span>
        },
        {
          title: '信访事项编号',
          dataIndex: 'xfjbh',
          align: 'center',
          ellipsis: true
        },
        {
          title: '信访目的',
          align: 'center',
          dataIndex: 'purpose',
          scopedSlots: { customRender: 'purpose' },
          ellipsis: true
        },
        {
          title: '问题属地',
          align: 'center',
          dataIndex: 'problemTerritory',
          ellipsis: true
        },
        {
          title: '内容分类',
          align: 'center',
          dataIndex: 'contentType',
          ellipsis: true
        },
        {
          title: '当前状态',
          align: 'center',
          dataIndex: 'dealType',
          scopedSlots: { customRender: 'dealType' },
          ellipsis: true
        },
        {
          title: '内容',
          align: 'center',
          dataIndex: 'content',
          ellipsis: true
        },
        {
          title: '姓名',
          align: 'center',
          dataIndex: 'contactName',
          ellipsis: true
        },
        {
          title: '联系电话',
          align: 'center',
          dataIndex: 'contactPhone',
          ellipsis: true
        },
        {
          title: '关键字',
          align: 'center',
          dataIndex: 'keyName',
          ellipsis: true
        }

      ],
      /* table加载状态 */
      loading: false
      // 加载数据方法 必须为 Promise 对象
    }
  },
  mounted() {
    this.ds=moment(new Date()).format("YYYY-MM-DD");
    this.queryParam.ds=moment(new Date()).format("YYYYMMDD");
    // this.ds = '2022-05-20'
    // this.queryParam.ds = '20220520'
    this.loadData()
  },
  methods: {
    moment,

    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus
    },
    onChange(date, dateString) {
      this.ds=moment(this.ds).format("YYYY-MM-DD");
      this.queryParam.ds = dateString.replace(/-/g, '')
    },
    searchQuery() {
    },

    loadData() {
      this.loading = true
      this.dataSource=[]
      this.queryParam.pageSize = this.ipagination.pageSize
      this.queryParam.pageIndex = this.ipagination.current
      this.ipagination.total=0
      ReportsEpidemicDailyService.getReportsEpidemicOrder(this.queryParam).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records || res.result
          if (res.result.total) {
            this.ipagination.total = res.result.total
          } else {
            this.ipagination.total = 0
          }
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleClose(removedTag) {
      const tags = this.tags.filter(tag => tag !== removedTag)
      console.log(tags)
      this.tags = tags
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(function() {
        this.$refs.input.focus()
      })
    },
    async generateData() {
      if (this.totalTime.length === 0 || this.unfinishedTime.length === 0) {
        this.$message.warn("请完整填写时间！！")
        return;
      }

      let data = {
        keys: this.tags,
        ds: moment(this.totalTime[1]).format("YYYYMMDD"),
        totalBeginTime: moment(this.totalTime[0]).format("YYYY-MM-DD HH:mm:ss"),
        totalEndTime: moment(this.totalTime[1]).format("YYYY-MM-DD HH:mm:ss"),
        unfinishedBeginTime: moment(this.unfinishedTime[0]).format("YYYY-MM-DD HH:mm:ss"),
        unfinishedEndTime: moment(this.unfinishedTime[1]).format("YYYY-MM-DD HH:mm:ss"),
      }
      this.loading = true
      await ReportsEpidemicDailyService.generateData(data).then(res => {
        if (res.success.result === true) {
          this.$message.success("数据生成成功")
        }
      })
      this.ds = moment(this.totalTime[1]).format("YYYY-MM-DD")
      this.queryParam.ds = moment(this.totalTime[1]).format("YYYYMMDD"),
      this.loadData()
    },
    handleInputChange(e) {
      this.inputValue = e.target.value
    },

    handleInputConfirm() {
      const inputValue = this.inputValue
      let tags = this.tags
      if (inputValue && tags.indexOf(inputValue) === -1) {
        tags = [...tags, inputValue]
      }
      console.log(tags)
      Object.assign(this, {
        tags,
        inputVisible: false,
        inputValue: ''
      })
    },
    handleTableChange(pagination) {
      console.log(pagination)
      this.ipagination.current = pagination.current
      this.ipagination.pageSize = pagination.pageSize
      this.loadData()
    }
  }
}
</script>

<style scoped>

</style>